<template>
  <div>
    <el-select style="width: 100%;" v-model="memberName" clearable :filter-method="remoteMember" value-key="id"
      filterable placeholder="请选择会员" @change="selectMember">
      <el-option style="width: 600px;" v-for="item in memberList" :key="item.id" :label="item.name" :value="item">
        <div style="display: flex">
          <span style="width: 60px;">{{item.code}}</span>
          <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{ item.mobile }}</span>
          <div style="width: 200px;">
            <span style="color: #8492a6; font-size: 8px;">{{item.address}}</span>
          </div>
        </div>
      </el-option>
      <div style="display: flex;width: 100%;position: absolute;bottom: 0">

        <div style="width: 50%;background-color: rgb(248,248,248);"></div>
        <div class="elOption" @click="toSearchMember">搜索客户</div>
      </div>
      <div style="height: 30px"></div>
    </el-select>
    <el-dialog title="双击选择客户" :visible.sync="memberTableVisible" width="950px" v-el-drag-dialog append-to-body
      :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    list as memberList
  } from '@/api/member'
  import memberTable from '@/components/MemberTable/index'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../utils/utils.js'
  export default {
    data() {
      return {
        memberName: '',
        memberList: [],
        memberTableVisible: false,
        query:{
          memberId:''
        }
      }
    },
    components: {
      memberTable,
    },
    created() {
      var _this = this
      _this.loadMember('')
    },
    directives: {
      elDragDialog
    },
    methods: {
      //会员选择
      loadMember(query) {
        var _this = this
        let params = new URLSearchParams();
        params.append('keyword', query)
        memberList(params).then(response => {
          console.log(response);
          _this.memberList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      remoteMember(query) {
        this.loadMember(query)
      },
      selectMember(data) {
        var _this = this;
        if (!utils.isNull(data)) {
          _this.query.memberId = data.id;
          _this.memberName = data.name
        } else {
          _this.query.memberId = '';
        }
         this.$emit('queryMemberClick',this.query)
      },
      toSearchMember() {
        this.memberTableVisible = true
      },
      memberTableClose() {
        this.memberTableVisible = false
      },
      memberDouble(data) {
        var _this = this
        this.query.memberId = data.id;
        this.memberName = data.name
        this.memberTableVisible = false
        this.$emit('queryMemberClick',this.query)
      },
    }
  }
</script>

<style>
.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}
</style>
